<template>
	<view class="safe-area-inset-bottom" style="padding-bottom: 160rpx;">
		<u--form labelPosition="left" :model="formData" ref="form1" labelWidth="auto">
			<view class="pad-20" style="background-color: #fff;">
				<u-form-item label="头像" prop="avatar" borderBottom>
					<view class="avatar">
						<image :src="formData.avatar" class="avatar-img"></image>
					</view>
				</u-form-item>
				<u-form-item label="昵称" prop="nickname" borderBottom>
					<view class="nickname">
						<text class="nickname-txt">{{ formData.nickname }}</text>
					</view>
				</u-form-item>
				<u-form-item label="视频号ID" prop="videoID" borderBottom>
					<view class="input-txt-box">
						<!-- <u--input v-model="formData.videoID" placeholder="请点击右侧箭头输入您的视频号ID" border="none" class="input-txt" :disabled="true"  disabledColor="#fff"></u--input> -->
						<!-- <u-icon name="arrow-right" color="#ccc" size="24" class="icon-btn" @click="handleClickArrow"></u-icon> -->
						<view class="nickname">
							<text class="nickname-txt">{{ formData.videoID }}</text>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="橱窗二维码" prop="qrcode" borderBottom>
					<view class="avatar">
						<image :src="formData.qrcode" class="avatar-img qrcode-img" @click="imgPreview(formData.qrcode)"></image>
					</view>
				</u-form-item>
				<view class="bottom-btn">
					<view class="logout-btn" @click="onClickLogout">退出登陆</view>
				</view>
			</view>
		</u--form>

		<!-- 弹窗 -->
		<u-popup :show="show" mode="bottom" @close="close" @open="open">
			<view class="popup-container">
				<view class="title">
					<text>视频号授权</text>
				</view>
				<view class="main-txt">
					<text>1、请确保当前登录微信视频号和需授权的视频号信息一致</text>
				</view>
				<view class="input-box">
					<u--input placeholder="请输入您的视频号ID" v-model="inputTxt"></u--input>
				</view>
				<view class="sub-txt">
					<text>2、视频ID获取方法：微信-我-视频号-右上角三个点头像-频号ID长按复制</text>
				</view>
				<view class="btn-box">
					<view class="cancle-btn" @click="close">取消</view>
					<view class="sure-btn" @click="handleSure">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import variables from "@/uni.scss"
import {
	mapState,
	mapActions
} from 'vuex';
export default {
	data() {
		return {
			formData: {
				avatar: '',
				nickname: '',
				videoID: '',
			},
			show: false,
			inputTxt: '',
		}
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
	},
	mounted() {
		this.getUserInfo();
	},
	computed: {
		...mapState('user', {
			userInfo: 'userInfo'
		}),
	},
	onLoad() {
		console.log(this.userInfo);
		if (Object.keys(this.userInfo).length != 0 && this.userInfo.constructor === Object) {
			this.formData.avatar = this.userInfo.avatar;
			this.formData.nickname = this.userInfo.nickname;
		} else {
			console.log('去登录');
		}
	},
	methods: {
		...mapActions('user', {
			logout: 'logout',
		}),
		//查看图片
		imgPreview(url) {
			uni.previewImage({
				urls: [url]
			})
		},
		open() {
			// console.log('open');
		},
		close() {
			this.show = false
			// console.log('close');
		},
		handleClickArrow() {
			this.show = true;
		},
		//获取用户信息
		getUserInfo() {
			uni.showLoading({
				mask: true,
				title: '用户信息获取中...'
			})
			this.$api.baseInfo.getUserInfo().then(res => {
				console.log(res);
				uni.hideLoading();
				this.formData.videoID = res.data.videoid;
				this.formData.qrcode = res.data.qrcode;
			})
		},
		//保存视频号
		handleSure() {
			// sphLVjnq6ZQ5oA0   视频号ID
			if (this.inputTxt == '') {
				this.$u.toast('请输入您的视频号ID');
				return;
			}

			uni.showLoading({
				mask: true,
				title: '数据提交中...'
			})

			let obj = {
				vid: this.inputTxt
			}
			this.$api.baseInfo.save(obj).then(res => {
				console.log(res);
				uni.hideLoading();
				uni.$u.toast(res.msg);
				this.show = false;
			})
		},
		// 登出
		onClickLogout() {
			uni.showModal({
				title: '提示',
				content: '确认退出登录？',
				success: (res) => {
					if (res.confirm !== true) {
						return;
					}
					this.logout().then(() => {
						uni.redirectTo({
							url: '/pages/login/login'
						})
					});
				}
			});
		},
	}
}
</script>

<style lang='scss' scoped>
.avatar {
	width: 100%;
	height: 100rpx;
}

.nickname {
	width: 100%;
	height: 100rpx;
}

.avatar-img {
	width: 100rpx;
	height: 100rpx;
	border-radius: 20rpx;
	float: right;
}

.nickname-txt {
	float: right;
	line-height: 100rpx;
	font-weight: 600;
}

.input-txt-box {
	display: flex;
	height: 100rpx;
	// text-align: right;
}

.input-txt {
	flex: 2;
}

.icon-btn {
	flex: 1;
}

.popup-container {
	padding: 30rpx 30rpx 100rpx;

}

.title {
	text-align: center;
	font-size: 28rpx;
	margin: 30rpx 0;
}

.main-txt {
	font-size: 28rpx;
}

.sub-txt {
	font-size: 26rpx;
	margin-bottom: 30rpx;
}

.btn-box {
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-box view {
	width: 200rpx;
	height: 68rpx;
	background: #ddd;
	text-align: center;
	line-height: 68rpx;
	margin-left: 20rpx;
	color: #fff;
	font-size: 28rpx;
	border-radius: 10rpx;
}

.btn-box .sure-btn {
	background: #F4030F;
}

.input-box {
	border-bottom: 1rpx solid #eee;
	margin-bottom: 20rpx;
}

::v-deep .u-input {
	background-color: none;
}

.qrcode-img {
	border: 1rpx solid #eee;
}

.bottom-btn {
	margin-top: 100rpx;
	padding-bottom: 50rpx;
	text-align: center;
	align-items: center;
}

.logout-btn {
	background: #06A405;
	padding: 20rpx 40rpx;
	width: 400rpx;
	margin: 0 auto;
	border-radius: 60rpx;
	font-size: 28rpx;
	color: #fff;
}
</style>
